<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core">

    <body>

        <ui:composition template="./main.xhtml">

            <ui:define name="content">
                <p:tabView orientation="left">
                    <p:tab title="Categorias">
                        <p:panelGrid id="inputCategoria">
                            <p:row>
                                <p:column>
                                    <p:inputText  value="#{productosBean.nuevaCategoria}"/>                                
                                    <p:commandButton value="Nuevo" action="#{productosBean.saveCategoria}" update="inputCategoria"/>
                                </p:column>
                            </p:row>
                            <p:row>
                                <p:column>
                                    
                                        <p:dataTable id="tablaCategoria" value="#{productosBean.categorias}" var="c" editable="true">
                                            <p:ajax event="rowEdit" listener="#{productosBean.onRowEditCategoria}" update=":#{p:component('tablaCategoria')}"/>
                                            <p:column>
                                                <p:rowEditor/>
                                            </p:column>
                                            <p:column headerText="Descripcion">
                                                <p:cellEditor>
                                                    <f:facet name="output"><h:outputText value="#{c.descripcion}"/></f:facet>
                                                    <f:facet name="input"><p:inputText value="#{c.descripcion}"/></f:facet>
                                                </p:cellEditor>                                                
                                            </p:column>                                            
                                            <p:column>
                                                <p:commandButton value="Eliminar" action="#{productosBean.removeCategoria(c)}" update=":#{p:component('tablaCategoria')}"
                                                                 onclick="if(!confirm('Esta seguro de completar la accion?')) return null"/>
                                            </p:column>
                                        </p:dataTable>
                                    
                                </p:column>
                            </p:row>
                        </p:panelGrid>
                    </p:tab>
                    
                    <p:tab title="Productos">
                        <p:panelGrid>
                            <p:row>
                                <!-- Formulario -->
                                <p:column>
                                    <p:panelGrid id="inputProducto">
                            
                                        <p:row>
                                            <p:column>Descripcion</p:column>
                                            <p:column>
                                                <p:inputText value="#{productosBean.nuevoProducto}"/>
                                            </p:column>
                                        </p:row>
                                        <p:row>
                                            <p:column>Categoria</p:column>
                                            <p:column>
                                                <p:outputPanel autoUpdate="true">
                                                <h:selectOneMenu id="selectCategoria" value="#{productosBean.selected}">
                                                    <f:selectItems value="#{productosBean.categorias}"
                                                                   var="c"
                                                                   itemLabel="#{c.descripcion}"
                                                                   itemValue="#{c}"
                                                                   />
                                                </h:selectOneMenu>
                                                </p:outputPanel>
                                            </p:column>
                                        </p:row>
                                        <p:row>
                                            <p:column>Precio</p:column>
                                            <p:column><p:inputText value="#{productosBean.precio}"/></p:column>
                                        </p:row>
                                        <p:row>
                                            <p:column colspan="2">
                                                <p:commandButton value="Nuevo" action="#{productosBean.saveProducto}" update="inputProducto tablaProducto"/>
                                            </p:column>

                                        </p:row>
                                    </p:panelGrid>
                                    
                                </p:column>
                                
                                <!-- Tabla -->
                                <p:column>
                                    
                                    <p:dataTable widgetVar="tablaProducto" id="tablaProducto" value="#{comidaBean.productos}" var="p" editable="true">
                                        <p:ajax event="rowEdit" listener="#{comidaBean.onRowEdit}" update=":#{p:component('tablaProducto')}"/>
                                        <p:column>
                                            <p:rowEditor/>
                                        </p:column>
                                        <p:column headerText="Categoria">
                                            <p:cellEditor>
                                                <f:facet name="input">
                                                    <h:selectOneMenu value="#{p.categoria}">
                                                        <f:selectItems value="#{menuBean.categorias}" var="c" itemValue="#{c}" itemLabel="#{c.descripcion}"/>
                                                    </h:selectOneMenu>
                                                </f:facet>
                                                <f:facet name="output">
                                                    <h:outputText value="#{p.categoria.descripcion}"/>
                                                </f:facet>
                                            </p:cellEditor>
                                            
                                        </p:column>
                                        <p:column headerText="Descripcion">
                                            <p:cellEditor>
                                                <f:facet name="input"><p:inputText value="#{p.descripcion}"/></f:facet>
                                                <f:facet name="output"><h:outputText value="#{p.descripcion}"/></f:facet>
                                            </p:cellEditor>
                                            
                                        </p:column>
                                        <p:column headerText="Precio">
                                            <p:cellEditor>
                                                <f:facet name="input"><p:inputText value="#{p.precio}"/></f:facet>
                                                <f:facet name="output"><h:outputText value="#{p.precio}"/></f:facet>
                                            </p:cellEditor>
                                            
                                        </p:column>
                                        <p:column headerText="Notas">
                                            <p:cellEditor>
                                                <f:facet name="input"><p:inputText value="#{p.notas}"/></f:facet>
                                                <f:facet name="output"><h:outputText value="#{p.notas}"/></f:facet>
                                            </p:cellEditor>
                                            
                                        </p:column>
                                        <p:column>
                                            <p:commandButton value="Eliminar" action="#{comidaBean.removeProducto(p)}" update=":#{p:component('tablaProducto')}"/>
                                        </p:column>
                                    </p:dataTable>
                                </p:column>
                            </p:row>
                        </p:panelGrid>
                        
                    </p:tab>
                </p:tabView>
            </ui:define>

        </ui:composition>

    </body>
</html>
